<template>
<table border="1" align="center" width="400px">
  <caption>
    <h2>学生信息表</h2>
  </caption>
  <tr>
    <td>学号</td>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr align="center" v-for="(user,index) in listObj" :key="index">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td>{{user.age}}</td>
  </tr>
</table>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      listObj: [
        { id: 1, name: '刘兵', age: 25 },
        { id: 2, name: '汪琼', age: 18 },
        { id: 3, name: '张三', age: 22 },
        { id: 4, name: '李四', age: 20 },
        { id: 5, name: '王二', age: 19 }]
    })

    return {
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>
  h2{
    color:red;
  }
</style>